<template>
  <view class="refund-page">
    <!-- 退款申请列表 -->
    <scroll-view 
      class="refund-list"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="list-header">
        <view class="header-content">
          <text class="title">退款申请</text>
          <text class="subtitle">管理您的退款申请记录</text>
        </view>
      </view>
      
      <!-- 申请按钮区域 -->
      <view class="apply-section">
        <button class="apply-btn" @tap="goToRefundRequest">
          <view class="btn-content">
            <text class="btn-icon">📝</text>
            <view class="btn-text-group">
              <text class="btn-title">申请退款</text>
              <text class="btn-desc">快速提交退款申请</text>
            </view>
          </view>
          <text class="btn-arrow">›</text>
        </button>
      </view>
      
      <!-- 状态筛选区域 -->
      <view class="filter-section">
        <view class="filter-tabs">
          <view 
            v-for="tab in filterTabs" 
            :key="tab.value"
            :class="['filter-tab', { active: currentStatus === tab.value }]"
            @tap="filterByStatus(tab.value)"
          >
            <text class="tab-text">{{ tab.label }}</text>
            <view class="tab-count">{{ getCountByStatus(tab.value) }}</view>
          </view>
        </view>
      </view>
      
      <view class="refund-items">
        <view 
          v-for="item in filteredRefundList" 
          :key="item.rr_id"
          class="refund-item"
          @tap="viewRefundDetail(item)"
        >
          <view class="item-main">
            <view class="item-left">
              <view class="order-info">
                <text class="order-label">订单号</text>
                <text class="order-no">{{ item.orderId }}</text>
              </view>
              <view class="amount-info">
                <text class="amount-label">申请金额</text>
                <text class="amount">¥{{ item.requestAmount }}</text>
              </view>
              <view class="time-info">
                <text class="time">{{ formatDate(item.requestTime) }}</text>
              </view>
            </view>
            <view class="item-right">
              <view :class="['status-badge', getStatusClass(item.requestStatus)]">
                {{ getStatusText(item.requestStatus) }}
              </view>
              <text class="reason-text">{{ item.reason }}</text>
            </view>
          </view>
          <view class="item-arrow">
            <text class="arrow">›</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredRefundList.length === 0" class="empty-state">
        <view class="empty-icon">📋</view>
        <text class="empty-text">暂无{{ getCurrentStatusText() }}的退款申请</text>
        <text class="empty-desc">点击上方按钮申请退款</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { refundApi } from '../../api'

// 当前选中的状态筛选
const currentStatus = ref(-1) // -1 表示全部

// 筛选选项
const filterTabs = ref([
  { label: '全部', value: -1 },
  { label: '待处理', value: 0 },
  { label: '已同意', value: 1 },
  { label: '已拒绝', value: 2 },
  { label: '已取消', value: 3 }
])

// 退款申请列表
const refundList = ref([])

// 下拉刷新状态
const isRefreshing = ref(false)

// 根据状态筛选的列表
const filteredRefundList = computed(() => {
  if (currentStatus.value === -1) {
    return refundList.value
  }
  return refundList.value.filter(item => item.requestStatus === currentStatus.value)
})

// 根据状态筛选
const filterByStatus = (status) => {
  currentStatus.value = status
}

// 获取指定状态的数量
const getCountByStatus = (status) => {
  if (status === -1) {
    return refundList.value.length
  }
  return refundList.value.filter(item => item.requestStatus === status).length
}

// 获取当前状态文本
const getCurrentStatusText = () => {
  const currentTab = filterTabs.value.find(tab => tab.value === currentStatus.value)
  return currentTab ? currentTab.label : '全部'
}

// 跳转到退款申请页面
const goToRefundRequest = () => {
  uni.navigateTo({
    url: '/src/pages/mine/refund-request'
  })
}

// 查看退款详情
const viewRefundDetail = (item) => {
  uni.navigateTo({
    url: `/src/pages/mine/refund-details?id=${item.rrId}`
  })
}

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待处理',
    1: '已同意',
    2: '已拒绝',
    3: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-approved',
    2: 'status-rejected',
    3: 'status-cancelled'
  }
  return classMap[status] || ''
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

// 获取退款申请列表
const getRefundList = async () => {
  try {
    const token = uni.getStorageSync('token')
    // TODO: 调用获取退款申请列表接口
    const res = await refundApi.listRefundRequestByUserId(token)
    refundList.value = res.data
  } catch (error) {
    console.error('获取退款申请列表失败：', error)
  }
}

// 下拉刷新处理
const onRefresh = async () => {
  isRefreshing.value = true
  try {
    await getRefundList()
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 1500
    })
  } catch (error) {
    uni.showToast({
      title: '刷新失败',
      icon: 'error',
      duration: 1500
    })
  } finally {
    isRefreshing.value = false
  }
}

onMounted(() => {
  getRefundList()
})

// 页面显示时重新加载数据
const onShow = () => {
  getRefundList()
}
</script>

<style lang="scss" scoped>
.refund-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
}

// 列表样式
.refund-list {
  flex: 1;
  height: calc(100vh - 48rpx);
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    padding: 32rpx;
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

    .header-content {
      .title {
        font-size: 36rpx;
        font-weight: 700;
        color: #333;
        margin-bottom: 8rpx;
        display: block;
      }

      .subtitle {
        font-size: 26rpx;
        color: #999;
      }
    }
  }

  .apply-section {
    display: flex;
    justify-content: center;
    margin-bottom: 32rpx;

    .apply-btn {
      width: 100%;
      background: #fff;
      color: #333;
      font-size: 28rpx;
      padding: 32rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      border: 2rpx solid #f0f0f0;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.12);
        border-color: #e0e0e0;
      }

      .btn-content {
        display: flex;
        align-items: center;
        gap: 20rpx;

        .btn-icon {
          font-size: 48rpx;
          color: #1b3c4b;
        }

        .btn-text-group {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 4rpx;

          .btn-title {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
          }

          .btn-desc {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .btn-arrow {
        font-size: 36rpx;
        color: #ccc;
        font-weight: 300;
      }
    }
  }

  // 筛选区域样式
  .filter-section {
    margin-bottom: 24rpx;

    .filter-tabs {
      display: flex;
      background: #fff;
      border-radius: 20rpx;
      padding: 8rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

      .filter-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 16rpx;
        border-radius: 16rpx;
        transition: all 0.3s ease;
        position: relative;

        &:active {
          transform: scale(0.95);
        }

        &.active {
          background: linear-gradient(135deg, #1b3c4b 0%, #2e5c6a 100%);
          box-shadow: 0 4rpx 15rpx rgba(27, 60, 75, 0.3);

          .tab-text {
            color: #fff;
            font-weight: 600;
          }

          .tab-count {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
          }
        }

        .tab-text {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 8rpx;
          transition: all 0.3s ease;
        }

        .tab-count {
          font-size: 22rpx;
          color: #999;
          background: #f5f5f5;
          padding: 4rpx 12rpx;
          border-radius: 12rpx;
          min-width: 32rpx;
          text-align: center;
          transition: all 0.3s ease;
        }
      }
    }
  }

  .refund-items {
    .refund-item {
      background: #fff;
      border-radius: 20rpx;
      padding: 32rpx;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      position: relative;

      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.12);
      }

      .item-main {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .item-left {
          flex: 1;
          margin-right: 24rpx;

          .order-info {
            margin-bottom: 16rpx;

            .order-label {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 4rpx;
              display: block;
            }

            .order-no {
              font-size: 32rpx;
              color: #333;
              font-weight: 600;
            }
          }

          .amount-info {
            margin-bottom: 16rpx;

            .amount-label {
              font-size: 24rpx;
              color: #999;
              margin-bottom: 4rpx;
              display: block;
            }

            .amount {
              font-size: 36rpx;
              color: #ff6b6b;
              font-weight: 700;
            }
          }

          .time-info {
            .time {
              font-size: 26rpx;
              color: #999;
            }
          }
        }

        .item-right {
          text-align: right;

          .status-badge {
            font-size: 24rpx;
            padding: 8rpx 20rpx;
            border-radius: 20rpx;
            margin-bottom: 12rpx;
            display: inline-block;
            font-weight: 500;

            &.status-pending {
              background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
              color: #d63031;
            }

            &.status-approved {
              background: linear-gradient(135deg, #a8e6cf 0%, #88d8c0 100%);
              color: #00b894;
            }

            &.status-rejected {
              background: linear-gradient(135deg, #ff7675 0%, #fd79a8 100%);
              color: #fff;
            }

            &.status-cancelled {
              background: linear-gradient(135deg, #b2bec3 0%, #74b9ff 100%);
              color: #fff;
            }
          }

          .reason-text {
            font-size: 26rpx;
            color: #666;
            display: block;
          }
        }
      }

      .item-arrow {
        position: absolute;
        right: 32rpx;
        top: 50%;
        transform: translateY(-50%);

        .arrow {
          font-size: 32rpx;
          color: #ccc;
          font-weight: 300;
        }
      }
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 48rpx;
  text-align: center;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  .empty-icon {
    font-size: 120rpx;
    color: #ddd;
    margin-bottom: 32rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #666;
    font-weight: 600;
    margin-bottom: 16rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
  }
}
</style> 